﻿var winState = "0";

Ext.onReady(function () {
    yeardata = new Ext.data.JsonStore({
        url: Ext.getClassUrl('RecyclingView', 'GetYearTime'),
        root: 'ResponseObject',
        fields: ['yearid', 'yeartext'],
        listeners: {
            beforeload: function (st, op) {
                var re = new JsonRequest();
                re.category = CATEGORY.READONLY;
                st.baseParams = re;
                st.proxy.conn.jsonData = re;
            }
        }
    });
    yeardata.load();
    //数据列表
    var lmsstore = new Ext.data.JsonStore({
        url: Ext.getClassUrl('ProductReportView', 'GetMaterialsData'),
        root: 'ResponseObject',
        fields: ['a32', 'a33', '分类编码', '分类名称','进尺','产量','收入','支出','节超'],
        listeners: {
            beforeload: function (st, op) {
                var re = new JsonRequest();
                re.category = CATEGORY.READONLY;
                re.params.year = Ext.getCmp("year").getValue();
                re.params.month = Ext.getCmp("month").getValue();
                st.baseParams = re;
                st.proxy.conn.jsonData = re;
            }
        }
    });

        var teamStore = new Ext.data.JsonStore({
            data: [
                { name: '进尺', value: 0 },
                { name: '产量', value: 0 },
                { name: '收入', value: 0 },
                { name: '支出', value: 0 },
                { name: '节超', value: 0 }
            ],
            fields: ['name', 'value']
        });

    function NumFormat(s, m) {
        if (s < 0) m.css = 'redNum';
        //if (s == 0) return '';
        return Ext.util.Format.number(s, '0.00');
    }
    var lmsdatagrid = new Ext.grid.GridPanel({
        autoscroll: true,
        bodyStyle: 'padding:2px',
        border: false,
        loadMask: true, //加载
        columns: [
           { id: '队组编码', header: '队组编码', width: 100, dataIndex: 'a32', sortable: true },
           { header: '队组名称', width: 100, dataIndex: 'a33', sortable: true },
           { header: '分类编码', width: 100, dataIndex: '分类编码', sortable: true},
           { header: '分类名称', width: 100, dataIndex: '分类名称', sortable: true},
           { header: '进尺', width: 100, dataIndex: '进尺', sortable: true, renderer: NumFormat },
           { header: '产量', width: 100, dataIndex: '产量', sortable: true, renderer: NumFormat },
           { header: '收入', width: 100, dataIndex: '收入', sortable: true, renderer: NumFormat },
           { header: '支出', width: 100, dataIndex: '支出', sortable: true, renderer: NumFormat },
           { header: '节超', width: 100, dataIndex: '节超', sortable: true, renderer: NumFormat }
        ],
        store: lmsstore,
        listeners: {
            rowclick: function (g, r) {
                var record = g.getStore().getAt(r);
                Ext.getCmp('piePanel').setTitle('各队组材料比例图 - <b style="color:#000000;font-size:14px;">' + record.get('a33') + '</b>');
                teamStore.each(function (trc) {
                    var c = trc.get('name');
                    trc.set('value', record.get(c));
                });
            }
        }
    });
    //布局
    new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'center',
            layout: 'border',
            border: false,
            title: '团柏材料统计分析',
            iconCls: 'ReportTitle-icon',
            tbar: ['日期：', { xtype: 'combo', width: 100, id: 'year',
                typeAhead: true,
                triggerAction: 'all',
                lazyRender: true,
                mode: 'local',
                store: yeardata,
                valueField: 'yearid',
                displayField: 'yeartext'

            }, '年', { xtype: 'combo', width: 70, id: 'month',
                typeAhead: true,
                triggerAction: 'all',
                lazyRender: true,
                mode: 'local',
                store: new Ext.data.ArrayStore({
                    id: 0,
                    fields: [
                            'monthid',
                            'monthtext'
                        ],
                    data: [['01', '01'], ['02', '02'], ['03', '03'], ['04', '04'], ['05', '05'], ['06', '06'], ['07', '07'], ['08', '08'], ['09', '09'], ['10', '10'], ['11', '11'], ['12', '12']]
                }),
                valueField: 'monthid',
                displayField: 'monthtext'
            }, '月', { xtype: 'button', text: '查询', iconCls: 'search-icon', handler: function () {
                lmsstore.removeAll();
                lmsstore.load();
            }
            },'->', '-', { text: '图形报表', iconCls: 'ImgData-icon', handler: function () {
                if (winState == "0") {
                    winState = "2";
                    //Ext.getCmp("piePanel").collapse(true);
                    Ext.getCmp("DataList").collapse(true);
                    Ext.getCmp("ImgDataList").expand(true);
                }
                else {
                    winState = "0";
                    //Ext.getCmp("piePanel").expand(true);
                    Ext.getCmp("DataList").expand(true);
                }
            }
            }, '-',{ xtype: 'button', text: '返回', height: 20, width: 50, iconCls: 'page-back-icon', handler: function () {
                window.history.back(-1);
                }
            }],
            items: [{
                region: 'west',
                title: '数据报表',
                iconCls: 'DataList-icon',
                style: 'padding:2px',
                collapsible: true,
                width: 460,
                split: true,
                id: 'DataList',
                layout: 'fit',
                items: lmsdatagrid
            }, {
                region: 'center',
                split: true,
                layout: 'border',
                border: false,
                split: true,
                id: 'ImgCount',
                items: [{
                    region: 'center',
                    title: '图形报表',
                    iconCls: 'ImgDataList-icon',
                    id: 'ImgDataList',
                    style: 'padding-top:2px;padding-right:2px;padding-bottom:2px',
                    items: [{
                        xtype: 'columnchart',
                        store: lmsstore,
                        chartStyle: {
                            padding: 10,
                            animationEnabled: true,
                            legend: {
                                display: 'right',
                                padding: 2,
                                font: {
                                    family: 'Tahoma',
                                    size: 11
                                }
                            },
                            font: {
                                name: 'Tahoma',
                                color: 0x444444,
                                size: 11
                            },
                            dataTip: {
                                padding: 5,
                                border: {
                                    color: 0x99bbe8,
                                    size: 1
                                },
                                background: {
                                    color: 0xDAE7F6,
                                    alpha: .9
                                }
                            },
                            xAxis: {
                                color: 0x69aBc8,
                                majorTicks: { color: 0x69aBc8, length: 4 },
                                minorTicks: { color: 0x69aBc8, length: 2 },
                                majorGridLines: { size: 1, color: 0xeeeeee },
                                labelRotation: -90
                            },
                            yAxis: {
                                zeroGridLine:
                        	    {
                        	        size: 2,
                        	        color: 0xff0000
                        	    },
                                color: 0x69aBc8,
                                majorTicks: { color: 0x69aBc8, length: 4 },
                                minorTicks: { color: 0x69aBc8, length: 2 },
                                majorGridLines: { size: 1, color: 0xdfe8f6 }
                            }
                        },
                        xField: 'a33',
                        yField: '合计',
                        yAxis: new Ext.chart.NumericAxis({
                            displayName: '合计',
                            labelRenderer: Ext.util.Format.numberRenderer('0,0')
                        }),
                        series: [{
                            type: 'column',
                            displayName: '进尺',
                            yField: '进尺',
                            style: {
                                color: 0x8DB6CD
                            }
                        }, {
                            type: 'column',
                            displayName: '产量',
                            yField: '产量',
                            style: {
                                color: 0x8B8B00
                            }
                        }, {
                            type: 'column',
                            displayName: '收入',
                            yField: '收入',
                            style: {
                                color: 0x8B0000
                            }
                        }, {
                            type: 'column',
                            displayName: '支出',
                            yField: '支出',
                            style: {
                                color: 0x8B4513
                            }
                        }, {
                            type: 'column',
                            displayName: '节超',
                            yField: '节超',
                            style: {
                                color: 0xEEDC82
                            }
                        }]
                    }]
                }, {
                    id: 'piePanel',
                    region: 'south',
                    title: '比例图',
                    collapsible: true,
                    split: true,
                    height: 300,
                    iconCls: 'Piechart-icon',
                    style: 'padding:2px;',
                    items: [{
                        id: 'pieChart',
                        store: teamStore,
                        xtype: 'piechart',
                        series: [{
                            categoryField: 'name',
                            dataField: 'value'
                        }],
                        extraStyle: {
                            animationEnabled: true,
                            legend: {
                                display: 'right',
                                padding: 2,
                                font: {
                                    family: 'Tahoma',
                                    size: 11
                                }
                            }
                        }
                    }]
                }]
            }]
        }],
        listeners: {
            render: function () {
                Ext.getCmp("year").setValue(YearT);
                Ext.getCmp("month").setValue(MonthT);
                lmsstore.load();
            }
        }
    })


});


